<template>
  <div class="app-container">
    <view class="table-style">
      <view class="flex table-tr">
        <view class="title">任务名称</view>
        <view>{{ taskDetail.taskName }}</view>
      </view>
      <view class="flex table-tr">
        <view class="title">养护项目</view>
        <view>{{ taskDetail.projectName }}</view>
      </view>
      <view class="flex table-tr">
        <view class="title">关联设施</view>
        <view>{{ taskDetail.facilityName }}</view>
      </view>
      <view class="flex table-tr">
        <view class="title">案卷来源</view>
        <view>{{ taskDetail.caseCodes }}</view>
      </view>
      <view class="flex table-tr">
        <view class="title">期望完成时间</view>
        <view>{{ taskDetail.expectEndDate || '' }}</view>
      </view>
      <view class="flex table-tr">
        <view class="title">任务分配人</view>
        <view>{{ taskDetail.taskUserNickname }}</view>
      </view>
      <view class="flex table-tr">
        <view class="title">维修方案</view>
        <view><rich-text :nodes="taskDetail.content" class="content"></rich-text></view>
      </view>
    </view>
  </div>
</template>
<script>
import { DICT_TYPE, getDictDatas } from '@/utils/dict';
//任务详情
export default {
  name: 'taskDetail',
  props: {
    taskDetail: {
      type: Object,
      default: () => ({
        brokenImg: []
      })
    }
  },
  data() {
    return {};
  },
  created() {},
  methods: {}
};
</script>

<style lang="scss">
.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}

.app-container .el-input.is-disabled .el-input__inner {
  background-color: transparent;
  border-color: transparent;
  color: #000;
  cursor: default;
}

.content p {
  margin: 0;
  padding: 0;
}

.table-style {
  width: 600upx;
  margin: 30upx auto;
  font-size: 2.8rem;
  /*边框重叠，边框合并*/
  border-top: 1px solid #ccc;
  .table-tr {
    border-bottom: 1px solid #ccc;
  }
  .title {
    width: 25%;
    flex: none;
  }
  > view {
    > view {
      flex: 1;
      padding: 10px;
      border-left: 1px solid #ccc;
      &:last-child {
        border-right: 1px solid #ccc;
      }
    }
  }

  view > view.vertical {
    writing-mode: vertical-rl;
    text-align: left;
  }

  /*上边框线*/
  view > view:nth-of-type(odd) {
    width: 100px;
    /*宽度*/
    text-align: left;
    /*左对齐*/
    padding-left: 10px;
    font-weight: bold;
    /*下边框线*/
  }

  view > view:nth-of-type(even) {
    font-weight: normal;
    word-break: break-all;
  }
}
.img-wrap {
  display: flex;
  flex-wrap: wrap;

  img {
    margin-right: 5px;
    margin-bottom: 5px;
    cursor: pointer;
  }
}
</style>
